<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>函数 - JavaScript</title>
    <style>
        p {
            font-size: 24px;
            color: red;
            border: 1px solid red;
            text-align: center;
            width: 600px;
            margin: 20% auto;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h1>函数</h1>

    <p id="count-down">00:00:00</p>

    <script type="text/javascript">

        // --------------------------------------------------------------------
        // -- 函数
        // --------------------------------------------------------------------
        /*
            基本上所有的高级语言都支持函数，JavaScript也不例外。JavaScript的函数不但是“头等公民”，而且可以像变量一样使用，具有非常强大的抽象能力。
        */

        // ----------------------------------------------------
        // -- 语法
        // ----------------------------------------------------

        // -----------------------------
        // 1. 常规函数（具名函数）
        // -----------------------------
        /*
            声明语法:
                function 函数名([参数1, 参数2, ...]) {
                    代码块
                    [return 返回值]
                }
                注：参数可选，可以不传参数，也可以传入若干个参数
                注：return为可选，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。

             调用语法：
                没有返回值: 函数名(参数1, 参数2, ...)
                有返回值：let 变量名 = 函数名(参数1, 参数2, ...)
         */
        // 1.1 声明一个函数，打印：Hello function
        // 1.2 声明一个函数，传入三角形的底和高，返回三角形的面积



        // -----------------------------
        // 2. 匿名函数
        // -----------------------------
        /*
            语法:
                let 变量名 = function([参数1, 参数2, ...]){
                    代码块
                    [return 返回值]
                }
            注：匿名没有函数名。但是，匿名函数可以赋值给变量，所以可以通过变量调用该函数。
         */
        // 2.1 声明一个匿名函数，打印：Hello，我是一个匿名函数，可以通过变量名对我进行调用。
        //  使用typeof查看这个变量类型


        // -----------------------------
        // 3. 函数中的 arguments 变量
        // -----------------------------
        /*
            每一个函数都有一个arguments对象，它包括了函数所要调的参数，通常我们把它当作数组使用，用它的length得到参数数量。
            只能在函数体内使用
            不定参数的写法一般在封装框架的时候才使用
         */
        // 3.1 声明1个函数，没有参数定义，在函数里头打印出 arguments 变量。
        //  打印 arguments 长度，
        //  使用 typeof 查看 arguments 的类型
        //  遍历打印出 arguments 内的内容


        // -----------------------------
        // 4. 函数中的 不定参数
        // -----------------------------
        /*
            语法:
                function 函数名(...参数名) {
                    代码块
                    return 返回值
                }
                注：上面三个点不是表示省略号，是不定参数的语法

            说明：不定参数的写法一般在封装框架的时候才使用
         */
        // 4.1 声明一个函数，传入不定参数，然后遍历打印到控制台


        // -----------------------------
        // 5. 箭头函数
        // -----------------------------
        /*
            语法:
                ([参数1, 参数2, ...]) => 代码块
                注：上面三个点是表示省略号，表示参数可以有多个

            说明：不定参数的写法一般在封装框架的时候才使用
         */
        // 5.1 声明一个箭头函数，传入两个参数，返回和



        // -----------------------------
        // 6. 系统函数
        // -----------------------------
        /*
            parseInt：转换成整数类型
            parseFloat：转换成浮点型
            isNaN：判断是否是数字
            typeof:
         */
        // 6.1 让用户输入一个数字，然后查看其类型
        //  转换成整数类型
        // 6.2 让用户输入一个金额，然后查看其类型
        //  转换小数类型
        // 6.3 让用户输入一个数字，然后查看其类型
        //  判断是否是数字



        // -----------------------------
        // 7. Function构造器
        // -----------------------------
        /*
            语法:
                new Function('x', 'y', 'return x * y;');

            说明：知道就行
         */


        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 定义一个计算圆面积的函数areaOfCircle()，它有两个参数：
        //  r: 表示圆的半径；
        //  pi: 表示π的值，如果不传，则默认3.14
        // 2. 声明一个匿名函数，传入1个数字，求绝对值
        // 3. 声明一个没有参数的函数，使用arguments变量计算所有传入参数的和
        // 4. 声明一个不定参数的函数，打印出所有传递的参数
        // 5. 声明一个数组，使用箭头函数进行遍历
        // 6. 输出一个整数n, 求 1!+2!+3!+4!+…n!，使用1个函数封装n!
        // 7. 求出所有的水仙花数，使用函数封装判断一个数是否是水仙花数。
        // 8. 输入一个秒数, 然后开始倒计时到0秒, 最多10000秒
        // 9. 计算现在到2021-09-01的时间差, 然后开始倒计时,并输出在页面上, 输出格式: x天x小时x分钟x秒
        // 10. 使用js做一个电子表, 显示: yyyy-mm-dd hh:mm:ss, 并能够随时间跳动


    </script>

</body>
</html>